<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
      }
      #scroll {
        width: 820px;
        height: 150px;
        margin: 100px auto 0;
        /* 超出部分隐藏，清除浮动 */
        overflow: hidden;
      }
      #inScroll {
        width: 400%;
      }
      #scroll img {
        width: 200px;
        height: 150px;
        border: none;
        margin-right: 5px;
      }
      #scroll1,
      #scroll2 {
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="scroll">
      <div id="inScroll">
        <div id="scroll1">
          <a href="#"><img src="./img/1.jpg" alt="banner" /></a>
          <a href="#"><img src="./img/2.jpg" alt="banner" /></a>
          <a href="#"><img src="./img/3.jpg" alt="banner" /></a>
          <a href="#"><img src="./img/4.jpg" alt="banner" /></a>
        </div>
        <div id="scroll2">
          <!-- 也可以不克隆scroll1的图片重新加入一组图片 -->
          <!-- <a href="#"><img src="./images/1.jpg" alt="banner" /></a>
          <a href="#"><img src="./images/2.jpg" alt="banner" /></a>
          <a href="#"><img src="./images/3.jpg" alt="banner" /></a>
          <a href="#"><img src="./images/4.jpg" alt="banner" /></a> -->
        </div>
      </div>
    </div>
  </body>
  <script>
    // 封装一个用id获取元素的函数
    function $(id) {
      return document.getElementById(id);
    }
    var tab = $("scroll");
    var tab1 = $("scroll1");
    var tab2 = $("scroll2");

    var timer = null; //定义计时器
    var speed = 15; //设置速度

    // 克隆scroll1到scroll2中 避免组图太少
    tab2.innerHTML = tab1.innerHTML;

    function marquee() {
      if (tab.scrollLeft <= 0) {
        // offsetWidth:获取元素的宽度，scrollLeft：获取左侧滚动条内的宽度(初始值为0)
        tab.scrollLeft = tab.offsetWidth; //scroll1跑完接着跑scroll2中的图片
        // 初始时将scroll1藏进左滚动条中，显示scroll2
        // 当scroll1显示完后再重复将scroll1藏进左滚动条中，显示scroll2
      } else {
        // 减少左滚动条的宽度，让scroll1显示出来隐藏掉scroll2，
        tab.scrollLeft--; //按设定的时间，每次减1个像素
        // tab.scrollLeft++;//改变滚动方向
      }
    }

    timer = setInterval(marquee, speed);

    // 鼠标悬停时
    tab.onmouseover = function () {
      clearInterval(timer);
    };
    tab.onmouseout = function () {
      timer = setInterval(marquee, speed);
    };
  </script>
</html>
